<template>
	<div :style="sheight" ref="topheight"
	@touchstart="handleTouchStart"
	@touchmove="handleTouchMove"
	@touchend="handleTouchEnd">
		<home-header :statustop="open"></home-header>
		<home-icons :list="iconList"></home-icons>
		<home-banner :list="swiperList"></home-banner>
		<home-recommend :list="recommendList" 
		:statustopts="opents" 
		@acceptfiltback="acceptfiltbackTop"></home-recommend>
		<!-- 可以绑定@两个以上事件 -->
	</div>
</template>
<script>
// “/表示根路径”
import HomeHeader from './components/Header' 
import HomeIcons from './components/Icons'
import HomeBanner from './components/Banner'
import HomeRecommend from './components/Recommend'
import axios from 'axios'
export default{
	name:'Home',
	components:{
		HomeHeader:HomeHeader,
		HomeIcons:HomeIcons,
		HomeBanner:HomeBanner,
		HomeRecommend:HomeRecommend,
	},
	data () {
		return {
			sheight:{height:'auto',overflow:'scroll'},
			touchStatus: false,
			open: '',
			opents: '',
			swiperList:[],
			iconList:[],
			recommendList:[],		
		}
	},
	computed: {

	},
	methods: {
		getHomeInfo () {
			axios.get('/api/index.json')
				.then(this.getHomeInfoSucc)
		},
		getHomeInfoSucc (res) {
			res = res.data
			if (res.ret && res.data) {
				const data = res.data
				this.swiperList = data.swiperList
				this.iconList = data.iconList
				this.recommendList = data.recommendList
			}
		},		
		homescreenh () { 
			//让div高度等于屏幕高度; 不加px的话高度无法改变
			 this.sheight.height = screen.height + 'px'
		},
        handleTouchStart () {
          this.touchStatus = true
        },
        handleTouchMove () {
        	if (this.touchStatus) {	
        		const theight = this.$refs.topheight.scrollTop
        		// console.log(theight)
        		if (theight > 56) {
        			this.open = '1'
        		}
        		if (theight < 56) {
        			this.open = '0'
        		}
        		if (theight > 369) {
        			this.opents = '1'
        		}
        		if (theight < 369 || theight == 369) {
        			this.opents = '0'
        		}
        		if (theight < 264) {
        			this.opents = '0'
        		}
        	}
        },
        acceptfiltbackTop () {
        	const theight = this.$refs.topheight.scrollTop
        	if (theight <= 369) {
        		this.$refs.topheight.scrollTop = 370
        	}
        }, 
        handleTouchEnd () {
            this.touchStatus = false
        },

	},	
	computed: {

	},
	filter: {

	},
	created () {

	},
	mounted () {
		this.getHomeInfo()
		this.homescreenh()
	},
	activated () {

	},
}	
</script>
